<template>
  <div class="setting-container">
    <el-card class="box-card">
      <!-- 头部新增 -->
      <div slot="header" class="clearfix">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click.native="addRole"
        >
          新增角色
        </el-button>
      </div>
      <!-- 表单 -->
      <el-table
        :data="roleList"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="序号"
          width="100"
          type="index"
          :index="indexMethod"
        />
        <el-table-column
          align="center"
          prop="name"
          label="角色名称"
          width="180"
        />
        <el-table-column
          align="center"
          prop="description"
          label="描述"
        />
        <el-table-column label="操作" align="center" width="240">
          <template v-slot="scope">
            <el-button
              size="mini"
              @click="handleAssignPrem( scope.row)"
            >分配权限</el-button>
            <el-button
              size="mini"
              @click="handleEdit( scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete( scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="params.page"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="pageChange"
      />

    </el-card>
    <!-- 新增/修改角色dialog -->
    <add-role-vue
      ref="addRef"
      :dialogtitle="dialogTitle"
      :dialogvisible="dialogVisible"
      @close-dialog="closeDialog"
      @click-submit="fetchRoleList"
    />

    <!-- 分配权限dialog -->
    <el-dialog
      title="分配权限"
      :visible="assignVisible"
      width="500px"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, delRole } from '@/api/role'
import addRoleVue from './components/add-role.vue'
export default {
  name: 'Setting',
  components: {
    addRoleVue
  },
  data() {
    return {
      roleList: [],
      params: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      dialogVisible: false,
      dialogTitle: '',
      assignVisible: false
    }
  },
  mounted() {
    this.fetchRoleList()
  },
  methods: {
    // 获取角色列表
    async fetchRoleList() {
      const { total, rows } = await getRoleList(this.params)
      this.total = total
      this.roleList = rows
    },
    // 新增角色
    addRole() {
      this.dialogTitle = '新增角色'
      this.dialogVisible = true
    },
    // 关闭对话框
    closeDialog() {
      this.dialogVisible = false
      // this.$refs.form.resetFields()
    },

    // 分配权限事件
    handleAssignPrem(row) {
      console.log(row)
    },
    // 编辑事件
    handleEdit(row) {
      this.dialogTitle = '修改角色'
      this.dialogVisible = true
      // this.getRoleDetail(row.id)
      this.$refs.addRef.getRoleDetail(row.id)
    },
    // 删除事件
    handleDelete(row) {
      this.$confirm('是否确定删除当前角色？', '温馨提示', {
        type: 'warning',
        callback: async action => {
          if (action === 'confirm') {
            await delRole(row.id)
            this.$message.success('删除成功')
            this.fetchRoleList()
          }
        }
      })
    },
    // 修改每页显示数据事件
    handleSizeChange(val) {
      // 每页最多显示数据条数
      this.params.pagesize = val
      this.params.page = 1
      this.fetchRoleList()
    },
    // 修改当前显示页码
    pageChange(page) {
      // 当前显示第几页
      this.params.page = page
      this.fetchRoleList()
    },
    handleClose() {
      console.log(123)
    },
    indexMethod(index) {
      // return index * 2 + 2
      return this.params.pagesize * (this.params.page - 1) + index + 1
    }
  }
}
</script>

<style lang='scss' scoped></style>
